<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>CPU概况</span>
          </div>
          <el-descriptions :column="1" border>
            <el-descriptions-item>
              <template slot="label"> 逻辑核心数 </template>
              {{ cpuData.count }} 个
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 物理核心数 </template>
              {{ cpuData.lcount }} 个
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 当前使用率 </template>
              {{ cpuData.percent }}%
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>内存概况</span>
          </div>
          <el-descriptions :column="1" border>
            <el-descriptions-item>
              <template slot="label"> 内存大小 </template>
              {{ memoryData.total }} GB
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 已用内存 </template>
              {{ memoryData.used }} GB
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 当前使用率 </template>
              {{ memoryData.percent }}%
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>硬盘概况</span>
          </div>
          <el-descriptions :column="1" border>
            <el-descriptions-item>
              <template slot="label"> 容量 </template>
              {{ diskData.total }} GB
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 已用容量 </template>
              {{ diskData.used }} GB
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 当前使用率 </template>
              {{ diskData.percent }}%
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
    </el-row>
  </div>
</template>

<script>


export default {
  name: 'Dashboard',
  data() {
    return {
      cpuData: {},
      memoryData: {},
      diskData: {},
      

    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      let result = await this.$API.home.reqServerInfo()
      if (result.code == 200) {
        this.cpuData = result.data.cpu
        this.memoryData = result.data.memory
        this.diskData = result.data.disk
      }
    }
  },
  
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
